import { React, useEffect, useRef,useState } from 'react'
import * as echarts from "echarts";
import './index.scss'
export default function Index() {
  const chartRef = useRef(null);
   // 获取本地存储内容
   const wind=JSON.parse(localStorage.getItem('settings')) || {};
   console.log(wind,'123');
   const [menu,setMenu]=useState(wind.zoomMode);
   //修改颜色
  const [styles, setstyles] = useState(wind.colorData);
  const [colors, setcolors] = useState(wind.colors);

  function linepie(){
    let chartInstance = echarts.init(chartRef.current);
    chartInstance.clear()
    const option = {
      // tooltip: {
      //   trigger: 'axis',
      //   formatter: '{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%',

      // },
      tooltip: {
        trigger: "axis",
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'line' // 默认为直线，可选为：'line' | 'shadow'
        },
        backgroundColor: "rgba(0,0,0,0.5)",
        textStyle: {
          color: styles[colors][0] //设置文字颜色
        },
        formatter: '{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%',
      },


      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",//顶部空闲25% 用于展示标题 和图例，这里就是我们本文要调整的数据。
        containLabel: true,
      },
      legend: {
        data: ['吃饭', '学习', '工作', '其他', '睡觉'],
        textStyle: {
          // show: true,
          color: styles[colors][0],
        },
      },
      xAxis: {
        data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        axisLine: {
          lineStyle: {
            color: styles[colors][0],
            width: 2
          }
        }
      },
      yAxis: [{
        type: 'value',
        name: '时间/小时',
        show: true,
        interval: 2,
        axisLine: {
          lineStyle: {
            color: styles[colors][0],
            width: 2
          }
        },
        splitLine: { show: false },
       },

    ],
    color:styles[colors],
      series: [
        {
          name: '吃饭',
          type: 'line',
          smooth: true,
          data: [3, 2, 2, 2,2, 2, 3]
        },
        {
          name: '学习',
          type: 'line',
          smooth: true,
          data: [3, 1,1,1.5,1,1,2]
        },
        {
          name: '工作',
          type: 'line',
          smooth: true,
          data: [0, 8, 8, 8, 8,7.5,8]
        },
        {
          name: '其他',
          type: 'line',
          smooth: true,
          data: [10,6,6,5.5,7,7,3.5]
        },
        {
          name: '睡觉',
          type: 'bar',
          barWidth: '50%',
          data: [8, 7, 7, 7, 6,6.5,7.5]
        },
      ]
    };
    chartInstance.setOption(option);
    window.addEventListener("resize", function () {
      chartInstance.resize();
    });
  }

  useEffect(() => {
    linepie()
    if (wind.chartRefreshPeriod) {
      const timer = setInterval(() => {
        linepie();
      }, wind.chartRefreshPeriod * 1000)
      return ()=>  clearInterval(timer)
    }
  });
  //设置定时器

  //三元判断函数
  function Mentime({menu}){
    console.log('Mentime',menu);
    switch(menu){
      case "stretch":
        return(
          <div id='ech' ref={chartRef} style={{ height: '320px', width: '25vw' ,margin:'0 auto'}}></div>
        );
      case "cover":
        return(
          <div id='ech' ref={chartRef} style={{ height: '350px', width: '100%' ,margin:'0 auto'}}></div>
        );
      case "contain":
        return(
          <div id='ech' ref={chartRef} style={{ height: '34vh', width: '100%' ,margin:'0 auto'}}></div>
        );
      default:
        return (
          <div id="ech" ref={chartRef} style={{ width: "25vw", height: "320px", margin: "0 auto" }}></div>
        );
    }
  }
  return (
    <div className='right'>
      <h3>一周时间分布</h3>
      {/* <div id='ech' ref={chartRef} style={{ height: '320px', width: '25vw' }}></div> */}
      <Mentime menu={menu}/>
    </div>
  );
}
